﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jqueryklokken.aspx.cs" Inherits="Regnemaskinen.Jqueryklokken" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Klokken</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/geolocations_json.js"></script>
    <script type="text/javascript" language="javascript">
        /*$(function () {
            $("#location").autocomplete({
                //hvad blev der lige af Japan?
                data: [
                    ['Kabul', 1], ['Tirane', 2], ['Algiers', 3], ['Pago Pago', 4], ['Andorra la Vella', 5], ['Luanda', 6], ['W. Indies', 7],
                    ['Buenos Aires', 8], ['Yerevan', 9], ['Oranjestad', 10], ['Canberra', 11], ['Vienna', 12], ['Baku', 13], ['Nassau', 14],
                    ['Manama', 15], ['Dhaka', 16], ['Bridgetown', 17], ['Minsk', 18], ['Brussels', 19], ['Belmopan', 20], ['Porto-Novo (constitutional cotonou) (seat of gvnt)', 21],
                    ['Thimphu', 22], ['La Paz (adm.)/sucre (legislative)', 23], ['Sarajevo', 24], ['Gaborone', 25], ['Brasilia', 26], ['Road Town', 27], ['Bandar Seri Begawan', 28],
                    ['Sofia', 29], ['Ouagadougou', 30], ['Bujumbura', 31], ['Phnom Penh', 32], ['Yaounde', 33], ['Ottawa', 34], ['Praia', 35], ['George Town', 36], ['Bangui', 37],
                    ['N\'Djamena', 38], ['Santiago', 39], ['Beijing', 40], ['Bogota', 41], ['Moroni', 42], ['Brazzaville', 43], ['San Jose', 44], ['Yamoussoukro', 45], ['Zagreb', 46],
                    ['Havana', 47], ['Nicosia', 48], ['Prague', 49], ['P\'yongyang', 50], ['Kinshasa', 51], ['Copenhagen', 52], ['Djibouti', 53], ['Roseau', 54], ['Santo Domingo', 55],
                    ['Dili', 56], ['Quito', 57], ['Cairo', 58], ['San Salvador', 59], ['Malabo', 60], ['Asmara', 61], ['Tallinn', 62], ['Addis Ababa', 63], ['Stanley', 64], ['Torshavn', 65],
                    ['Suva', 66], ['Helsinki', 67], ['Paris', 68], ['Cayenne', 69], ['Papeete', 70], ['Libreville', 71], ['Banjul', 72], ['T\'bilisi', 73], ['Berlin', 74], ['Accra', 75],
                    ['Athens', 76], ['Nuuk', 77], ['Basse-Terre', 78], ['Guatemala', 79], ['St. Peter Port', 80], ['Conakry', 81], ['Bissau', 82], ['Georgetown', 83], ['Port-au-Prince', 84],
                    [' ', 85], ['Tegucigalpa', 86], ['Budapest', 87], ['Reykjavik', 88], ['New Delhi', 89], ['Jakarta', 90], ['Tehran', 91], ['Baghdad', 92], ['Dublin', 93], ['Jerusalem', 94],
                    ['Rome', 95], ['Kingston', 96], ['Amman', 97], ['Astana', 98], ['Nairobi', 99], ['Tarawa', 100], ['Kuwait', 101], ['Bishkek', 102], ['Vientiane', 103], ['Riga', 104], ['Beirut', 105],
                    ['Maseru', 106], ['Monrovia', 107], ['Tripoli', 108], ['Vaduz', 109], ['Vilnius', 110], ['Luxembourg', 111], ['Macau', 112], ['Antananarivo', 113], ['Lilongwe', 114],
                    ['Kuala Lumpur', 115], ['Male', 116], ['Bamako', 117], ['Valletta', 118], ['Fort-de-France', 119], ['Nouakchott', 120], ['Mamoudzou', 121], ['Mexico', 122], ['Palikir', 123],
                    ['Chisinau', 124], ['Maputo', 125], ['Yangon', 126], ['Windhoek', 127], ['Kathmandu', 128], ['Amsterdam/The Hague (seat of Gvnt)', 129], ['Willemstad', 130], ['Noumea', 131],
                    ['Wellington', 132], ['Managua', 133], ['Niamey', 134], ['Abuja', 135], ['Kingston', 136], ['Saipan', 137], ['Oslo', 138], ['Masqat', 139], ['Islamabad', 140], ['Koror', 141],
                    ['Panama', 142], ['Port Moresby', 143], ['Asuncion', 144], ['Lima', 145], ['Manila', 146], ['Warsaw', 147], ['Lisbon', 148], ['San Juan', 149], ['Doha', 150], ['Seoul', 151],
                    ['Bucuresti', 152], ['Moskva', 153], ['Kigali', 154], ['Basseterre', 155], ['Castries', 156], ['Saint-Pierre', 157], ['Kingstown', 158], ['Apia', 159], ['San Marino', 160],
                    ['Sao Tome', 161], ['Riyadh', 162], ['Dakar', 163], ['Freetown', 164], ['Bratislava', 165], ['Ljubljana', 166], ['Honiara', 167], ['Mogadishu', 168],
                    ['Pretoria (adm.) / Cap Town (Legislative) / Bloemfontein (Judicial)', 169], ['Madrid', 170], ['Khartoum', 171], ['Paramaribo', 172], ['Mbabane (Adm.)', 173],
                    ['Stockholm', 174], ['Bern', 175], ['Damascus', 176], ['Dushanbe', 177], ['Bangkok', 178], ['Skopje', 179], ['Lome', 180], ['Nuku\'alofa', 181], ['Tunis', 182], ['Ankara', 183],
                    ['Ashgabat', 184], ['Funafuti', 185], ['Kampala', 186], ['Kiev (Rus)', 187], ['Abu Dhabi', 188], ['London', 189], ['Dodoma', 190], ['Washington DC', 191],
                    ['Charlotte Amalie', 192], ['Montevideo', 193], ['Tashkent', 194], ['Port-Vila', 195], ['Caracas', 196], ['Hanoi', 197], ['Belgrade', 198], ['Lusaka', 199], ['Harare', 200]
                ]
            });
        });*/
        $(function () {
            var availableTags = [
            'Kabul', 'Tirane', 'Algiers', 'Pago Pago', 'Andorra la Vella', 'Luanda', 'W. Indies', 'Buenos Aires', 'Yerevan', 'Oranjestad', 'Canberra', 'Vienna', 'Baku', 'Nassau', 'Manama', 'Dhaka', 'Bridgetown', 'Minsk', 'Brussels', 'Belmopan', 'Porto-Novo (constitutional cotonou) (seat of gvnt)', 'Thimphu', 'La Paz (adm.)/sucre (legislative)', 'Sarajevo', 'Gaborone', 'Brasilia', 'Road Town', 'Bandar Seri Begawan', 'Sofia', 'Ouagadougou', 'Bujumbura', 'Phnom Penh', 'Yaounde', 'Ottawa', 'Praia', 'George Town', 'Bangui', 'N\'Djamena', 'Santiago', 'Beijing', 'Bogota', 'Moroni', 'Brazzaville', 'San Jose', 'Yamoussoukro', 'Zagreb', 'Havana', 'Nicosia', 'Prague', 'P\'yongyang', 'Kinshasa', 'Copenhagen', 'Djibouti', 'Roseau', 'Santo Domingo', 'Dili', 'Quito', 'Cairo', 'San Salvador', 'Malabo', 'Asmara', 'Tallinn', 'Addis Ababa', 'Stanley', 'Torshavn', 'Suva', 'Helsinki', 'Paris', 'Cayenne', 'Papeete', 'Libreville', 'Banjul', 'T\'bilisi', 'Berlin', 'Accra', 'Athens', 'Nuuk', 'Basse-Terre', 'Guatemala', 'St. Peter Port', 'Conakry', 'Bissau', 'Georgetown', 'Port-au-Prince', ' ', 'Tegucigalpa', 'Budapest', 'Reykjavik', 'New Delhi', 'Jakarta', 'Tehran', 'Baghdad', 'Dublin', 'Jerusalem', 'Rome', 'Kingston', 'Amman', 'Astana', 'Nairobi', 'Tarawa', 'Kuwait', 'Bishkek', 'Vientiane', 'Riga', 'Beirut', 'Maseru', 'Monrovia', 'Tripoli', 'Vaduz', 'Vilnius', 'Luxembourg', 'Macau', 'Antananarivo', 'Lilongwe', 'Kuala Lumpur', 'Male', 'Bamako', 'Valletta', 'Fort-de-France', 'Nouakchott', 'Mamoudzou', 'Mexico', 'Palikir', 'Chisinau', 'Maputo', 'Yangon', 'Windhoek', 'Kathmandu', 'Amsterdam/The Hague (seat of Gvnt)', 'Willemstad', 'Noumea', 'Wellington', 'Managua', 'Niamey', 'Abuja', 'Kingston', 'Saipan', 'Oslo', 'Masqat', 'Islamabad', 'Koror', 'Panama', 'Port Moresby', 'Asuncion', 'Lima', 'Manila', 'Warsaw', 'Lisbon', 'San Juan', 'Doha', 'Seoul', 'Bucuresti', 'Moskva', 'Kigali', 'Basseterre', 'Castries', 'Saint-Pierre', 'Kingstown', 'Apia', 'San Marino', 'Sao Tome', 'Riyadh', 'Dakar', 'Freetown', 'Bratislava', 'Ljubljana', 'Honiara', 'Mogadishu', 'Pretoria (adm.) / Cap Town (Legislative) / Bloemfontein (Judicial)', 'Madrid', 'Khartoum', 'Paramaribo', 'Mbabane (Adm.)', 'Stockholm', 'Bern', 'Damascus', 'Dushanbe', 'Bangkok', 'Skopje', 'Lome', 'Nuku\'alofa', 'Tunis', 'Ankara', 'Ashgabat', 'Funafuti', 'Kampala', 'Kiev (Rus)', 'Abu Dhabi', 'London', 'Dodoma', 'Washington DC', 'Charlotte Amalie', 'Montevideo', 'Tashkent', 'Port-Vila', 'Caracas', 'Hanoi', 'Belgrade', 'Lusaka', 'Harare'
		    ];
            $("#location").autocomplete({
                source: availableTags
            });
        });
        

        $(document).ready(function () {
            $.getJSON('Clock.aspx', function (data) {
                /*
                $('#clock').append("<span class='hourss'>" + data.Hour + "</span>");
                $('#clock').append("<span class='minutes'>" + data.Minute + "</span>");
                $('#clock').append("<span class='seconds'>" + data.Second + "</span>");*/
            });
            /*
            $("#location").change(function () {
                //alert($(".jquery-autocomplete-selected-item").text());
            });*/
        });
    </script>
    <link href="jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />

    <link href='http://fonts.googleapis.com/css?family=Share' rel='stylesheet' type='text/css'>
    <style type="text/css">
    body
    {
        text-align:center;
        margin:0;
        padding:0
    }
    #wrapper
    {
        text-align:left;
        margin:0 auto;
        width:800px;
        /*background-color:rgba(000,000,000,0.4);*/
    }
    .nbr
    {
        background: rgb(255,255,255); /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url();
        background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 38%, rgba(226,226,226,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(38%,rgba(255,255,255,1)), color-stop(100%,rgba(226,226,226,1))); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 38%,rgba(226,226,226,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 38%,rgba(226,226,226,1) 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 38%,rgba(226,226,226,1) 100%); /* IE10+ */
        background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 38%,rgba(226,226,226,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
        
        width:80px;
        height:120px;
        
        text-align:center;
        float:left;
        margin-right:10px;
        
        border-radius: 10px; 
        -moz-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        border:8px solid rgba(000,000,000,0.5);
    }
    
    /*6*96+80*/
    
    .nbr span
    {
        /*font-family:Consolas, Courier New;*/
        font-family: 'Share', cursive;
        font-weight:bold;/**/
        font-size:109px;
        color:rgba(000,000,000,0.5);
    }
    .clock
    {
        width:700px;
        margin:0 auto;
        /*background-color:#990000;*/
        margin-top:200px;
    }
    .last
    {
        margin-right:40px;
    }
    
    
    
/**********************************************/
    .clearfix:after {
	    content: ".";
	    display: block;
	    clear: both;
	    visibility: hidden;
	    line-height: 0;
	    height: 0;
    }
 
    .clearfix {
	    display: inline-block;
    }
 
    html[xmlns] .clearfix {
	    display: block;
    }
 
    * html .clearfix {
	    height: 1%;
    }
    
    .ui-widget
    {
        font-size:12px;
        font-family:Arial;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper">

        <div class="ui-widget">
            <label for="location">Tags: </label>
            <input type="text" name="location" id="location" />
        </div>

            
            <div class="clock clearfix">
                <div class="nbr hours">
                    <span>1</span>
                </div>
                <div class="nbr hours last">
                    <span>8</span>
                </div>
                <div class="nbr minutes">
                    <span>1</span>
                </div>
                <div class="nbr minutes last">
                    <span>6</span>
                </div>
                <div class="nbr seconds">
                    <span>2</span>
                </div>
                <div class="nbr seconds">
                    <span>4</span>
                </div>
            </div>
        </div>









    </form>
</body>
</html>